<template>
    <div class="detail">
<div class="setorder">
<h1 style="margin-bottom:20px">下订单</h1>
<p>
    <strong style="margin-right:20px">用户姓名:</strong>{{user.name}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <strong style="margin-right:20px">订单金额:</strong>{{product.price}}
</p>
<div class="blank"></div>
<div>
<table>
    <tr>
        <th style="width:100px">图片</th>
        <th style="width:300px">名称</th>
        <th style="width:100px">类型</th>
        <th style="width:100px">单价</th>
        <th style="width:100px">数量</th>
    </tr>
    <tr>
        <td><img :src="product.imgPath" style="width:100px"></td>
        <td style="width:300px">{{product.title}}</td>
        <td style="width:100px">{{product.type}}</td>
        <td style="width:100px">{{product.price}}</td>
        <td style="width:100px">1</td>
    </tr>
</table>
</div>
<el-button type="primary" @click="$router.go(-1)">取消</el-button>
<el-button type="primary" @click="addOrder">提交订单</el-button>
</div>
</div>
</template>
<script>

export default {
    name: 'OrderView',
    data(){
        return{
            product:{},
            user:{}
        }
    },
    created(){
        let id = this.$route.query.productId
        this.axios.get('api/goods').then(res => {
            this.product = res.data.data.find(data => {
                return data.id == id
            })
        })
        this.user=JSON.parse(localStorage.getItem('currentUser'))
    },
    methods:{
        addOrder(){
            let totalprice=this.product.price
            let product=this.product
            this.axios.post('api/Addorders',
            {order:{product,totalprice}})
            .then(res=>{
                let orderId=res.data.data
                this.$message('订单提交成功')
                this.$router.push({path:'/pay',query:{data:totalprice,orderId:orderId}})
            })
            .catch(err=>{
                this.$message('订单提交失败')
            })
        }
    }
}
</script>
<style>

.blank{
    height: 50px;
}
.setorder{
    border: 1px solid #ccc;
    width: 700px;
    margin: 0 auto;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.85);
    margin-top: 30px;
}
.detail{
    background: url(../../public/22.png)no-repeat;
    height: 100vh;
    border-top: 1px solid transparent;
}
</style>